<template>
    <div class="bg-weather-secondary px-12 pt-10 mt-2 rounded">
        <div class="flex gap-6">
            <div class="flex flex-col flex-1 text-center gap-4" v-for="list in  WeatherStore.WeatherLists" :key="list.date">
                
                <span>{{ list.week }}</span>
                <span>{{ list.date }}</span>
                <span>{{ list.weather }}</span>
                <span>风力 {{ list.power }}级</span>
            </div>
        </div>
        <div class="weathercanvas h-40 mt-10" >
             <div style="position: relative; width: 100%; height:100%; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                 <v-chart :option="option" ></v-chart>
             </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useWeatherStore } from '@/stores/counter'
import { defineProps } from 'vue';
const props = defineProps({
    city: 
        {type: String
        },
    adcode:
        {type: String
        } 
});
const key = ref('')
let chartCity = ref('')
let chartAdcode = ref('')
const option = ref({})
const WeatherStore = useWeatherStore()
function renderChart(data) {
    option.value = {
        xAxis: {
            type: 'category',
            data: data.date,
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            interval: 0
        },
        grid: {
            left: 0,
            top: 20,
            right: 0,
            bottom: 0
        },
        series: [
            {
                name: '白天温度',
                type: 'line',
                data: data.daytemp,
                smooth: true,
                label: {
                    show: true,
                    position: 'top', // 标签位置
                    formatter: function (params) {
                        return `白${params.value}℃`
                    },
                    backgroundColor: 'transparent',
                    color: '#FFF',
                    offset: [0, 0]
                }
            },
            {
                name: '夜间温度',
                type: 'line',
                data: data.nighttemp,
                smooth: true,
                label: {
                    show: true,
                    position: 'bottom', // 标签位置
                    formatter: function (params) {
                        return `晚${params.value}℃`
                    },
                    backgroundColor: 'transparent',
                    color: '#FFF',
                    offset: [0, 0]
                }
            }
        ]
    }
}
watch(() => [props.city, props.adcode], async (newValues) => {
    const [newCity, newAdcode] = newValues;
    chartCity.value = newCity;
    chartAdcode.value = newAdcode;
    key.value = WeatherStore.key;
    await WeatherStore.getWeather(chartAdcode.value,key.value,'all')
    renderChart(WeatherStore.WeatherInfo)
}, { immediate: true });
</script>

<style scoped>
.bg-weather-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(0 78 113 );
}
</style>